<template>
  <div class="setting" :class="isShow ? 'bgc-night' : 'bgc-sun'">
    <div class="Nav" @click="turnMy">
      <van-nav-bar title="设置" left-arrow />
    </div>
    <div class="size">
      <van-cell center title="大字号" label="内容页以更大字号显示" />
      <van-switch v-model="checked" @click="bigFontSize" class="option" />
    </div>
    <div class="account" @click="goAccount">
      <van-cell title="账号与安全" is-link />
    </div>
    <div class="assess">
      <van-cell title="去好评" is-link />
      <van-cell title="去吐槽" is-link @click="negativeComment" />
    </div>
    <div class="third">
      <div class="clean">
        <van-cell title="清理缓存" value="0.00M" />
      </div>
      <div class="private" @click="goPrivate">
        <van-cell title="隐私中心" is-link />
      </div>
      <div class="license">
        <van-cell title="证件中心" is-link />
      </div>
      <div class="protocol">
        <van-cell title="知乎协议" is-link />
      </div>
    </div>
    <div class="back">
      <div class="goBack" @click="Pop">退出登录</div>
    </div>
  </div>
</template>
<script>
import { Dialog } from 'vant';
export default {
  name: "Setting",
  data() {
    return {
      checked: false,
      show: false,
      isShow: localStorage.getItem("theme") === "true" ? true : false,
    };
  },
  created() { },
  methods: {

    showPopup() {
      this.show = true;
    },
    turnMy() {
      this.$router.push({ name: "My" });
    },
    bigFontSize() {
      var div = document.querySelector(".goBack")
      if (!this.checked) {
        console.log("1");

        div.style.fontSize = "20px"
      } else {
        console.log("2");
        div.style.fontSize = ""
      }
    },
    // 去吐槽
    negativeComment() {
      this.$toast.fail("请设置系统邮箱后再试");
    },
    goAccount() {
      this.$router.push({ name: "Account" });
    },
    goPrivate() {
      this.$router.push({ name: "Private" });
    },
    Pop() {
      Dialog.confirm({
        title: '确定退出登录',
      })
        .then(() => {
          // on confirm
          this.$router.push({name:"Login"})
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>
<style lang="postcss" scoped>
.setting {
  height: 667px;
  background-color: #f7f7f7;
}

.size {
  display: flex;
  background-color: #fff;
}

.size .option {
  margin: 15px;
}

.account,
.assess,
.third,
.back {
  margin: 10px 0;
}

.clean,
.private,
.license {
  border-bottom: 1px solid #ddd;
}

.back {
  width: 100%;
  height: 60px;
  position: relative;
  background-color: #fff;
}

.goBack {
  position: absolute;
  left: 40%;
  top: 20px;
  font-size: 16px;
  color: red;
}
</style>